<template>
  <div id="state">
    <div class="portrait">
      <div class="head">
        <img :src="head + user.image" />
      </div>
      <h2>{{ user.name }}</h2>
    </div>
    <div class="news">
      <p :key="item" v-for="item in news">{{ item }}</p>
    </div>
  </div>
</template>

<script>
// vuex
import userInfo from "@/store/user/userInfo";

export default {
  data() {
    return {
      news: ["喜欢", "消息", "访问", "日志"],
    };
  },
  setup() {
    let { user, head } = userInfo();
    return {
      user,
      head,
    };
  },
  created() {
    $(document).ready(function () {
      let wiscr = $(window).scrollTop();
      let main = $("#main").width();
      let height = $(".Rotation").height();
      let width = ($(window).outerWidth() - main - 18) / 2;

      if (wiscr >= height) {
        $("#state").addClass("scrollTop");
        $("#state").css("right", width + "px");
      } else {
        $("#state").removeClass("scrollTop");
        $("#state").css("right", width + "px");
      }

      $(window).scroll(() => {
        let wiscr = $(window).scrollTop();
        let main = $("#main").width();
        let height = $(".Rotation").height();
        let width = ($(window).outerWidth() - main - 18) / 2;

        if (wiscr >= height) {
          $("#state").addClass("scrollTop");
        } else {
          $("#state").removeClass("scrollTop");
          $("#state").css("right", width + "px");
        }
      });
      $(window).resize(function () {
        let wiscr = $(window).scrollTop();
        let main = $("#main").width();
        let height = $(".Rotation").height();
        let width = ($(window).outerWidth() - main - 18) / 2;
        if (wiscr >= height) {
          $("#state").addClass("scrollTop");
          $("#state").css("right", width + "px");
        } else {
          $("#state").removeClass("scrollTop");
        }
      });
    });
  },
};
</script>

<style>
@import url("./state.css");
</style>
